<template>
  <view>


    <view v-show="isLogin == '1'">
      <Navbar :hideBtn="true" bgColor="#fff" title="我的" :border="true"></Navbar>
      <view class="profile-top">
        <view class="user-info">
          <view>
            <view class="user-info--name">{{ user.nickname }}</view>
            <text class="user-info--account">{{ user.email || user.telephone || user.username }}</text>
          </view>
          <view>
            <u-avatar src="/static/img/avatar.png" size="120rpx"></u-avatar>


          </view>
        </view>
        <view style="display: flex; justify-content: flex-end;margin: 20px;">
          <view style="color: white; font-size: 20px;">{{ user.deptName ? user.deptName : '未知部门' }}</view>
        </view>
        <!-- <view style="padding: 40rpx 40rpx 0 40rpx;">
        <view class="profile-rule">

          <<u-row>
            <u-col span="8">
              
            </u-col>
          </u-row>
        </view>
      </view> -->
      </view>

      <view style="padding: 40rpx; margin-top: 200rpx;">
        <u-row gutter="32">
          <!-- <u-col span="6">
            <u-button icon="phone" text="联系我们" plain></u-button>
          </u-col> -->
          <u-col span="12">
            <u-button icon="reload" text="退出登录" @click="logout" plain type="primary"></u-button>
          </u-col>
        </u-row>
      </view>

      <Password :show="resetPassword" @close="resetPassword = false"></Password>
    </view>
    <view v-show="isLogin == '2'">
      <view class="column">
        <u-toast ref="uToast" style="z-index: 0;" />
        <view class="user_hd">
          <ul class="user">
            <li>
              <span>
                <!-- <image :src="avatar" mode=""  ></image> -->
                <!-- <image :src="avatar" mode="aspectFill" style="height: 100rpx; width: 100rpx;margin-right: 12upx;">
                </image> -->
                <u-avatar src="avatar: '../../static/fqq-img/img/my/gr.svg',"></u-avatar>
              </span>
            </li>
            <li>
              <div style="width: 30rpx;"></div>
            </li>
            <li>
              <div v-if="phone">
                <p>您好: {{ phone }}</p>
              </div>
              <div @click="denglu" v-else>登录</div>
            </li>
          </ul>
        </view>
        <!-- <view style="border-bottom: 1px solid red;width: 95%;"></view> -->
        <view class="user_hd_bo" @click="changeSub()">
          <!-- mySub.png -->
          <image class="arrowhead" src="@/static/fqq-img/mySub.png" mode="aspectFill" style="width: 100%">
          </image>

          <!-- <image show-menu-by-longpress="true" :src="" mode=""></image> -->

        </view>

        <u-cell-group style="width: 95%; border-radius: 14px; margin: 70upx 18upx; border: 1px solid #dedede;">
          <view v-for="(item, index) in grouplie" :key="index" style="border-radius: 10%;">
            <!-- <u-cell-item v-if="item.isShow && item.sort == 1" :icon="item.img" :title="item.text"
					@click="change(item.sort)" :value="sumIntegral"></u-cell-item>
				<u-cell-item v-else-if="item.isShow && item.sort == 2" :icon="item.img" :title="item.text"
					@click="change(item.sort)" :value="usableIntegral"></u-cell-item>
				<u-cell-item v-else-if="item.isShow && item.sort == 7 && isApprovalArr.indexOf(isApproval) > -1"
					:icon="item.img" @click="changeA()" :title="isApprovalVal"></u-cell-item>
				<u-cell-item v-else-if="item.isShow && item.sort == 7" :icon="item.img" :title="isApprovalVal"
					@click="change(item.sort)"></u-cell-item> -->
            <u-cell :title-style="{ color: '#e9ebf0' }" v-if="item.isShow" :icon="item.img" :title="item.text"
              @click="change(item.sort)" size="large">
            </u-cell>
          </view>
        </u-cell-group>
        <div style='display: flex; justify-content: center;margin-top: 200rpx;font-size: 20rpx;color:#fff'>
          <span>当前版本号：1.0.1 </span>
        </div>
        <u-popup :show="popupshow" mode="center" border-radius="14" :closeable="true">
          <view class="popup  column">
            <view class="p1">官方微信客服二维码</view>
            <image show-menu-by-longpress="true" :src="codeImg" mode=""></image>
            <view class="p2" @click="saveimg">
              保存到相册
            </view>
          </view>
        </u-popup>
        <u-modal :show="show" :show-cancel-button="true" @confirm="confirm" :content-style="{ color: '#2557e3' }"
          :content="content" :closeOnClickOverlay="true"></u-modal>

        <!-- 客服电话 -->
        <u-modal :show="showKF" :show-cancel-button="false" :content-style="{ color: '#2557e3' }" confirm-text="点击拨打"
          :content="content" :show-title="false" @confirm="confirmKF" :mask-close-able="true"
          :confirm-button-style="{ color: '#2557e3' }" :closeOnClickOverlay="true" @close="showKF = false">
        </u-modal>

        <!-- 注销警示 -->
        <u-modal :show="showZX" :show-cancel-button="true" :content-style="{ color: '#2557e3' }" confirm-text="确定注销"
          cancel-text="取消操作" :content="contentZX" :show-title="false" @confirm="confirmZX" :mask-close-able="true"
          :confirm-button-style="{ color: '#2557e3' }" :closeOnClickOverlay="true">
        </u-modal>

      </view>


    </view>
  </view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import Password from './password.vue'
import { getUserInfo, verification } from '@/api/api'
import {
  mapMutations,
  mapState
} from 'vuex'

export default {
  components: {
    Navbar,
    Password,
  },
  data() {
    return {
      user: {},
      resetPassword: false,
      system: {},
      isLogin: '',
      renewaltime: false,
      renewalshow: false,
      loansshow: false,
      popupshow: false,
      show: false,
      content: '客服电话：4001019559',
      contentZX: '注销后无法恢复，请谨慎操作',
      codeImg: '', //客服二维码
      timelist: ['3天', '7天', '10天', '15天'],
      interest: '', //续期利息
      lendingRates: '',
      loanTime: '',
      getLoanRenewallist: '',
      loanAmount: '0.00',
      phone: '',
      showKF: false,
      showZX: false,
      grouplie: [
        {
          sort: 1,
          img: '/static/fqq-img/img/my/grzl@2x.png',
          text: '客服电话',
          pages: '../my/flash',
          isShow: true
        },
        // {
        //   sort: 2,
        //   img: '/static/img/my/sm@2x.png',
        //   text: '隐私政策',
        //   pages: 'https://zxcd.gdthrd.com/privacy/index1.html',
        //   isShow: true
        // },
        {
          sort: 3,
          img: '/static/fqq-img/img/my/tc@2x.png',
          text: '退出登录',
          pages: '../my/loans',
          isShow: true
        },
        {
          sort: 4,
          img: '/static/fqq-img/img/tabbar/2022/my@2x.png',
          text: '注销账户',
          pages: '../my/loans',
          isShow: true
        }

      ],

    }
  },
  computed: {
    // ...mapState(['userinfo', 'grouplie'])
  },
  created() {
    // this.getInfo()
  },
  onLoad() {
    this.system = uni.getSystemInfoSync();
    this.verification()
  },
  methods: {

    changeSub() {
      // 跳转到表单申请页
      uni.navigateTo({
        url: '/pages/form/fqq-form',
      })
    },


    denglu() {
      // 跳转登录页

      uni.navigateTo({
        url: '/',
      })

    },
    confirmKF() {
      uni.makePhoneCall({
        phoneNumber: this.phone,
        success: function () {
          console.log('拨打电话成功');
        },
        fail() {
          console.log('打电话失败了');
        }
      })

    },
    change(index) {
      if (uni.getStorageSync('phone') == '' && index != '1' && index != '2') {
        uni.$u.toast('请先登录')
        uni.navigateTo({
          url: '/',
        })
        return
      } else {
        // 客服电话
        if (index == '1') {
          this.showKF = true

        } else if (index == '2') {
          // plus.runtime.openURL('https://zxcd.gdthrd.com/privacy/index1.html')
        } else if (index == '3') {
          // 退出登录
          uni.navigateTo({
            url: '/',
          })
          // 清除缓存
          uni.removeStorageSync('phone');
          this.phone = ''

        } else if (index == '4') {
          alert('注销账户功能暂未开放')
          this.showZX = true

        }



      }
    },
    verification() {
      verification({
        deviceBrand: this.system.deviceBrand ? this.system.deviceBrand : this.system.model,
      }).then(res => {
        if (res.code == 200) {
          this.isLogin = res.data.status
          if (this.isLogin == '1') {
            this.getInfo();
          } else {
            this.phone = uni.getStorageSync('phone')
          }
        }
      })
    },

    getInfo() {
      getUserInfo().then(res => {
        if (res.code == 200) {
          this.user = res.data
        }
      })
    },
    navigateTo(url) {
      uni.navigateTo({ url: url })
    },
    logout() {
      const app = this
      app.$store.dispatch('Logout').then(res => {
        uni.reLaunch({
          url: '/pages/login/index'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-top {
  background-color: #f3f4f6;
  background-image: url('../../static/img/bg2.png');
  padding-top: 50rpx;
  background-size: revert;
  height: 20vh;
}

.profile-rule {
  height: 140rpx;
  line-height: 140rpx;
  padding: 0px 40rpx;
  background-color: $u-main-color;
  border-radius: 16px 16px 0 0;
  box-shadow: 0px 16px 26px rgba(0, 0, 0, .8);
}

.btn-text {
  font-size: 28rpx;
  color: #606266;
}

.user-info {

  display: flex;
  justify-content: space-between;
  padding: 40rpx;
  max-width: 100%;
  color: #f3f4f6;

  &--name {
    font-size: 56rpx;
    font-weight: bold;
    width: 100%
  }

  &--account {
    font-size: 26rpx;
    color: #f3f4f6;
  }

}

.column {
  // width: 100%;
  height: 88vh;
  background: linear-gradient(to top, #fff, #3342ff);
  // padding: 0 80rpx;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin: 0 20upx;
}

li text {
  margin-left: 20upx;
}

ul li span {
  color: white;
  font-weight: bold;
}

.user_hd {
  height: 200upx;
  background: -webkit-linear-gradient(right, #ffffff, #a6d0fc);
  border-radius: 5upx;
  margin: 20upx;
  width: 95%;
}

.user_hd_bo {
  // height: 20vh;
  // background:-webkit-linear-gradient(right, #ffffff, #a6d0fc);
  border-radius: 15upx;
  margin-bottom: 1vh;
  width: 95%;
  margin: 20upx;
}

.user {
  display: flex;
  align-items: center;
  height: 200upx;
}

@media (max-height: 1366px) and (min-height: 1000px) {
  .arrowhead {
    height: 20vh;
  }

  .user_hd_bo {
    height: 20vh;
    margin: 20upx;
  }

}

// @media (max-height: 1366px) and (min-height: 1000px) {
// 	.arrowhead {
// 		height: 20vh;
// 	}
// 	.user_hd_bo{
// 		height: 20vh;
// 	}

// }
@media (max-height: 1000px) and (min-height: 900px) {
  .arrowhead {
    height: 13vh;
  }

  .user_hd_bo {
    height: 13vh;
    margin: 20upx;
  }

}

@media (max-height: 900px) and (min-height: 800px) {
  .arrowhead {
    height: 11vh;
  }

  .user_hd_bo {
    height: 11vh;
    margin: 20upx;
  }

}

@media (max-height: 800px) and (min-height: 500px) {
  .arrowhead {
    height: 16vh;
  }

  .user_hd_bo {
    height: 16vh;
    margin: 20upx;
  }

}

@media (max-height: 500px) and (min-height: 300px) {
  .arrowhead {
    height: 19vh;
  }

  .user_hd_bo {
    height: 19vh;
    margin: 20upx;
  }

}

.arrowhead {
  background-position: 0% 0%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: inline-block;
  overflow: hidden;
  position: relative;
}

.popup {
  width: 547rpx;
  height: 567rpx;

  .p1 {
    margin-top: 40rpx;
    color: #343434;
    text-align: center;
    font-size: 32rpx;
    width: 100%;
  }

  .p2 {
    margin-top: 20rpx;
    color: #edd99f;
    text-align: center;
    font-size: 26rpx;
    width: 100%;
  }

  image {
    margin: 20rpx;
    width: 353rpx;
    height: 353rpx;
  }


}
</style>